<template>
	<view class="casehadding">
		<view class="top-tab"></view>
		<!-- 搜索 -->
		<view class="uni-form">
			<view class="uni-form-item uni-column">
				<input
					type="text"
					name="eventName"
					class="uni-input"
					v-model="searchForm1.eventName"
					placeholder="请输入案件名称"
					autocomplete="off" />
				<image
					@click="searchEvent"
					src='@/static/city-manage/uni-search.png'
					class="icon_close">
				</image>
			</view>
		</view>
		<!-- 案件列表 -->
		<view class="task_list">
			<view
				class="task_item"
				v-for="(item, index) in eventData"
				:key="index">
				<view class="item_left">
					<image
						v-if="item.smallImgData && item.smallImgData.length > 0"
						:src="img_item"
						v-for="(img_item, img_index) in item.smallImgData"
						:key="img_index"
						@click="seeImages(img_index, item.bigImgData)"
						mode="aspectFit">
					</image>
				</view>
				<view class="item_right">
					<view class="task_top">
						<view class="task_type">{{item.eventTypeLv2Name}}</view>
						<view class="details_btn" @click="eventDetails(item)">详情</view>
					</view>
					<view class="task_desc">案件名称：{{item.eventName}}</view>
					<view class="task_date">{{item.createTime}}</view>
					<view class="task_status">{{item.eventDealStatusName}}</view>
					<view class="task_desc">案件描述：{{item.eventDescribe}}</view>
					<view class="task_address">
						<view>案件地址：{{item.eventAddress}}</view>
						<image @click="toggleMap(item.bdx, item.bdy)" src="../../static/city-manage/uni-address.png">
						</image>
					</view>
				</view>
			</view>
			<uni-load-more :status="status"></uni-load-more>
		</view>

		<!-- 地图弹出层 -->
		<uni-popup
			ref="popupMap"
			type="center"
			:mask-click="false"
			background-color="#fff">
			<view class="popup-content">
				<image
					@click="closeToggleMap"
					class="close_map"
					src="../../static/city-manage/close_map.png">
				</image>
				<public-map
					ref="publicMapDialog"
					:gdx="gdx"
					:gdy="gdy">
				</public-map>
			</view>
		</uni-popup>

		<!-- 右上角搜索 -->
		<uni-drawer ref="showRight" mode="right" :width="300">
			<search-task-tab
				v-if="userInfo.role.roleKey == 'admin'"
				:category="false"
				@getTaskList="getMycasehanding">
			</search-task-tab>
			<search-task-tab
				v-else-if="userInfo.role.roleKey == 'bdjgjxy'"
				@getTaskList="getMycasehanding">
			</search-task-tab>
			<casehand-task
				v-else
				@getCasehand="getMycasehanding"
				:reciveType="pageTaskType">
			</casehand-task>
		</uni-drawer>
	</view>
</template>

<script>
	import casehandTask from '@/pages/mycomponents/casehandingTask.vue';
	import publicMap from '@/pages/mycomponents/publicMap.nvue';
	import searchTaskTab from '@/pages/mycomponents/searchTaskTab.vue';
	import { getallCase, getMyReportTaskList } from '@/api/my_task';
	import URL from '@/util/url.js'
	export default {
		components: {
			'public-map': publicMap,
			'casehand-task': casehandTask,
			'search-task-tab': searchTaskTab
		},
		data() {
			return {
				pageTaskType: '2',
				searchForm1: {
					eventName: "",
				},
				btnnum: 0,
				userInfo: uni.getStorageSync('userInfo'),
				eventData: [],
				bigImgData: [],
				smallImgData: [],
				type: "12",
				imgUrl: URL.CASEIMAGE_URL,
				gdx: null,
				gdy: null,
				status: 'loading',
				pageSize: 10,
				pageNum: 1,
				total: 0,
				options:{}
			};
		},
		onShow() {
			uni.$on("handleFun", res => {
				this.title = res.title;
				// 清除监听
				this.getMycasehanding();
				uni.$off('handleFun');
			})
		},
		onLoad() {
			//获取全部 案件列表
			this.getMycasehanding();
		},
		//页面生命周期---监听原生标题栏按钮点击事件
		onNavigationBarButtonTap() {
			//关闭地图
			this.$refs.popupMap.close();
			//打开筛选抽屉
			setTimeout(() => {
				this.$refs.showRight.open();
			}, 500);
		},
		onReachBottom() {
			if (this.pageSize * this.pageNum >= this.total) {
				this.status= 'noMore';
				return;
			} else {
				this.pageNum = this.pageNum + 1;
				this.status= 'loading';
			}

			setTimeout(() => {
				this.getMycasehanding();
			}, 300);
		},
		onPullDownRefresh() {
			this.resetParam();
			this.status= 'loading';
			this.getMycasehanding();
		},
		methods: {
			resetParam() {
				this.pageSize = 10;
				this.pageNum = 1;
				this.total = 20;
				this.eventData = [];
			},
			//查询案件
			searchEvent() {
				this.resetParam();
				this.status= 'loading';
				this.getMycasehanding();
			},

			change(e) {
				this.btnnum = e
			},

			//案件列表查看大图
			seeImages(index, bigImgData) {
				let _this = this;
				uni.previewImage({
					urls: bigImgData,
					current: index,
					longPressActions: {
						success: function(data) {
						},
						fail: function(err) {
						}
					}
				});
			},
			async getMycasehanding(data) {
				let options = null,
					_this = this;
				if (data === undefined) {
					let to = this.pageNum == 1 ? {} : this.options;
					options = {
						...to,
						eventName: this.searchForm1.eventName,
						deptParentCode: "10000",
						pageSize: this.pageSize,
						pageNum: this.pageNum
					}
				} else { //data为searchTask子页面传过来的参数
					options = data;
					this.resetParam();
					options.pageSize = this.pageSize;
					options.pageNum = this.pageNum;
					options.deptParentCode = '10000';
					this.eventData = [];
				}
				this.options = options;
				uni.showLoading();

				if(!options.tabIndex){
					await getallCase(options).then((res) => {
						uni.hideLoading();
						if (res.code === 200) {
							let eventData = res.rows;
							eventData.forEach((ele, index) => {
								ele.smallImgData = [];
								ele.bigImgData = [];

								let images =  [];

								if(ele.params && ele.params.images){
									images =  JSON.parse(ele.params.images.value);
									for (var i = 0; i < images.length; i++) {
										if (images[i].size_type === "0") {
											ele.smallImgData.push(this.imgUrl + images[i].path);
										} else if (images[i].size_type === "1") {
											ele.bigImgData.push(this.imgUrl + images[i].path);
										}
									}
								}
							});

							this.eventData = [...this.eventData, ...eventData];
							this.total = res.total;

							if (this.pageSize * this.pageNum >= this.total) {
								this.status= 'noMore';
							} else {
								this.status= 'more';
							}
						} else {
							this.$tip.toast(res.msg);
						}
						this.$refs.showRight.close();
						uni.stopPullDownRefresh();
					}).catch((error) => {
						uni.hideLoading();
						this.$refs.showRight.close();
						uni.stopPullDownRefresh();
					})
				} else {
					await getMyReportTaskList(options).then((res) => {
						uni.hideLoading();
						if (res.code === 200) {
							let eventData = res.rows;
							eventData.forEach((ele, index) => {
								ele.smallImgData = [];
								ele.bigImgData = [];

								let images =  [];

								if(ele.params && ele.params.images){
									images =  JSON.parse(ele.params.images.value);
									for (var i = 0; i < images.length; i++) {
										if (images[i].size_type === "0") {
											ele.smallImgData.push(this.imgUrl + images[i].path);
										} else if (images[i].size_type === "1") {
											ele.bigImgData.push(this.imgUrl + images[i].path);
										}
									}
								}
							});

							this.eventData = [...this.eventData, ...eventData];
							this.total = res.total;

							if (this.pageSize * this.pageNum >= this.total) {
								this.status= 'noMore';
							} else {
								this.status= 'more';
							}
						} else {
							this.$tip.toast(res.msg);
						}
						this.$refs.showRight.close();
						uni.stopPullDownRefresh();
					}).catch((error) => {
						uni.hideLoading();
						this.$refs.showRight.close();
						uni.stopPullDownRefresh();
					})
				}


			},
			eventDetails(eventItem) {
				uni.navigateTo({
					// url: '/pages/my-task/eventDetails?eventItem='+ JSON.stringify(eventItem)+ '&type='+this.type,
					url: '/pages/casehandling/caseDetails?eventItem=' + JSON.stringify(eventItem) + '&type=' + this.type,

				})
			},
			//点击位置查看地图
			toggleMap(gdx, gdy) {
				this.gdx = gdx;
				this.gdy = gdy;
				this.$refs.popupMap.open();
				//等元素渲染完成后再调地图
				setTimeout(() => {
					this.$nextTick(() => {
						// #ifdef H5
						this.$refs.publicMapDialog.initMap();
						// #endif
					});
				}, 500);
			},
			//关闭弹出层
			closeToggleMap() {
				this.$refs.popupMap.close();
			}
		}
	}
</script>

<style lang="scss">
	/* 将三个内容view的display设置为none(隐藏) */
	.end-title {
		display: flex;
		background: #FFFFFF;
	}

	.end-title view {
		flex-grow: 1;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		border-right: 0.5px solid #FAFAFA;
	}

	.end-title view:nth-last-child {
		border: none;
	}

	.end-cont {
		// display: none;
		// background: #FE642E;
	}

	.btna {
		color: #FFFFFF;
		background: #FA8258;
	}

	.dis {
		display: block;
	}

	.casehadding {}

	.top-tab {
		height: 60rpx;
		background: #c4534c;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		right: 0rpx;
		margin-top: 0px;
		/* #ifdef H5 */
		margin-top: 44px;
		/* #endif */
	}

	.uni-form {
		position: fixed;
		top: 0px;
		left: 0px;
		right: 0px;
		z-index: 9;
		background: white;
		border-radius: 20rpx;
		padding: 20rpx;
		box-shadow: #b5cede 0px 0px 10px;
		margin: 0rpx 40rpx 0;
		/* #ifdef H5 */
		top: 44px;

		/* #endif */
		.uni-form-item {
			display: flex;
			flex-direction: row;
			align-items: center;
			border: 1px solid #ccc;
			border-radius: 20rpx;
			padding: 0;

			.uni-input {
				height: 60rpx;
				border-radius: 20rpx;
			}

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}
		}
	}

	.task_list {
		padding: 150rpx 0 20rpx;

		.nodata {
			text-align: center;
			color: $qj-color;
			font-size: 15px;
		}

		.task_item {
			margin: 0 44rpx;
			box-shadow: #b5cede 0px 0px 10px;
			background: white;
			border-radius: 20rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			.item_left {
				width: 144rpx;
				height: 264rpx;
				border: 1px solid #ccc;
				margin-right: 20rpx;

				image {
					width: 144rpx;
					height: 100%;
				}

				image:first-child~image {
					display: none;
				}
			}

			.item_right {
				width: calc(100% - 208rpx);

				.task_top {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.task_type {
						font-size: 32rpx;
						color: $qj-color;
					}

					.details_btn {
						width: 84rpx;
						height: 52rpx;
						background-image: url(../../static/city-manage/uni-task-details.png);
						background-repeat: no-repeat;
						background-position: 100% 100%;
						background-size: 100%;
						text-align: center;
						color: #fff;
						line-height: 52rpx;
						font-size: 24rpx;
					}
				}

				.task_date {
					color: $qj-gary;
					font-size: 24rpx;
				}

				.task_status {
					color: #ff5722;
					font-size: 30rpx;
				}

				.task_desc,
				.task_address {
					color: $qj-black;
					font-size: 26rpx;
					text-align: justify;
				}

				.task_address {
					width: 100%;
					display: flex;
					flex-direction: row;

					view {
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						flex: 1;
					}

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}

	//地图弹出层
	.uni-popup__wrapper-box {
		.popup-content {
			background-color: #fff;
			padding: 20rpx;
			position: relative;
			width: 640rpx;
			// #ifdef APP-PLUS
			height: 1000rpx;
			// #endif
			// #ifdef H5
			height: 1000rpx;

			// #endif
			.close_map {
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				right: -24rpx;
				top: -22rpx;
				background: #fff;
				border: 4rpx solid #ccc;
				border-radius: 50%;
				padding: 10rpx;
				z-index: 999999;
			}

		}
	}

	//搜索抽屉
	.uni-drawer__content--visible {
		width: 600rpx !important;
	}
</style>
